<template>
    <view>
        <view class="alldiv">
            <!-- 这个是返回 -->
            <view class="navdiv">
                <u-navbar back-text="返回" :leftText="language.Cyclingrecords.nav" @leftClick="navigateBack"></u-navbar>
            </view>
            <!-- 这个是主体区域 -->
            <view class="bodydiv">
                <!-- 这个列表大盒子父级元素区域 -->
                <view class="fatherdiv">
                    <!-- 这个是列表区域 -->
                    <view class="listdiv" v-for="(item, i) in bybikelist" :key="i">
                        <u-cell-group>
                            <u-cell :border="false">
                                <view slot="title" style="font-size: 12px; color: rgba(153, 153, 153, 1)">
                                    {{ language.Cyclingrecords.lc }} {{ item.distanceKm ? item.distanceKm : '--' }}km
                                </view>
                                <view slot="value" style="font-size: 12px; color: rgba(153, 153, 153, 1)">
                                    {{ item.startTime }}
                                </view>
                            </u-cell>
                            <u-cell>
                                <view slot="title" style="display: flex; align-items: center">
                                    <image src="@/static/Cyclingrecords/time.jpg" style="width: 14px; height: 14px" mode="scaleToFill" />
                                    <span v-if="formatTime(item.durationSeconds)" style="margin-left: 10px; font-size: 12px; color: rgba(51, 51, 51, 1)">
                                        骑行{{ formatTime(item.durationSeconds) }}
                                    </span>
                                </view>
                                <view slot="value" style="display: flex">
                                    <span v-if="item.status == 0" style="font-size: 12px; color: rgba(47, 212, 184, 1)">--</span>
                                    <span v-else style="font-size: 12px; color: rgba(47, 212, 184, 1)">
                                        <span>￥</span>
                                        {{ item.cost ? item.cost : '--' }}
                                    </span>
                                </view>
                            </u-cell>
                            <u-cell>
                                <view v-if="item.status == 0" slot="title" style="font-size: 12px; color: rgba(255, 141, 26, 1)">进行中</view>
                                <view v-else slot="title" style="font-size: 12px; color: rgba(153, 153, 153, 1)">已完成</view>
                            </u-cell>
                        </u-cell-group>
                    </view>
                    <block v-if="bybikelist.length === 0">
                        <emptyPage title="暂无骑行记录～"></emptyPage>
                    </block>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import emptyPage from '@/components/emptyPage.vue'
// import {recordList} from "../../http/ride/ride";
import * as UserApi from '@/api/member/user.js'

export default {
    components: {
        emptyPage
    },
    data() {
        return {
            language: {},
            bybikelist: []
        }
    },
    onShow: function () {
        this.getlanguagedata()
        this.getData()
    },
    // onLoad() {
    //     this.getlanguagedata();
    //     this.getData();
    // },
    // mounted() {
    //     this.getlanguagedata();
    //     this.getData();
    // },
    methods: {
        //将事件处理为几分几秒
        formatTime(seconds) {
            if (!seconds) {
                return ''
            }
            const minutes = Math.floor(seconds / 60)
            const remainingSeconds = seconds % 60

            if (minutes > 0) {
                return `${minutes}分钟${remainingSeconds}秒`
            } else {
                return `${seconds}秒`
            }
        },
        async getData() {
            const userId = uni.getStorageSync('UID')
            let data = {
                pageNo: 1,
                pageSize: 10,
                userId: userId
            }
            UserApi.recordList(data).then((res) => {
                this.bybikelist = res.data.list
            })
        },
        getlanguagedata() {
            this.language = this.$store.getters['internationalization/getinternationalization']
        },
        // 返回上一个页面
        navigateBack() {
            uni.navigateBack({
                delta: 1,
                success: () => {
                    // 返回成功后的回调函数
                },
                fail: () => {
                    // 返回失败后的回调函数
                }
            })
        },
        onReachBottom: function () {
            this.getRanklist()
        }
    }
}
</script>

<style lang="less" scoped>
.alldiv {
    width: 100vw;
    height: 100vh;
    //   这个是返回
    .navdiv {
        width: 100%;
        height: 10%;
        overflow: hidden;
        z-index: 999999;
    }

    //   这个是主体样式
    .bodydiv {
        width: 100%;

        height: 90%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        // 这个列表大盒子父级元素区域样式
        .fatherdiv {
            width: 95%;
            height: 100%;
            overflow: auto;
            //   这个列表样式
            .listdiv {
                width: 100%;
                height: 21%;
                margin-bottom: 10px;
                background-color: #ffffff;
                border-radius: 6px;
                left: 16px;
                box-shadow: 0px 2px 4px rgba(5, 48, 7, 0.08);

                .fatherddvv {
                    width: 100%;
                    height: 50%;
                    background-color: black;

                    .abovediv {
                        width: 100%;
                        height: 50%;
                        background-color: rgb(161, 98, 16);
                    }

                    .labtextdiv {
                        width: 100%;
                        height: 50%;
                        background-color: aqua;
                        display: flex;
                        justify-content: space-between;
                    }
                }
            }
        }
    }
}
</style>
